<template>
    <div>
        <headNav  title="选择科目" ></headNav>
        <div class="cur-sub">当前学科：{{curSubject.stageName}}-{{curSubject.name}}</div>
        <div class="stag-p">
            <div v-for="(item,index) in stageList" :key="index" class="stag-item" 
            @click="selectStage(item)"
            :class="{'active': curStage.stageId == item.stageId}"
            >{{item.stageName}}</div>
            
        </div>
        <div class="subject-p">
            <div class="subject-item" v-for="(item, index) in subjectList" :key="index"
            @click="selectSubject(item)"
            :class="{'active': item.id == curSubject.id}"
            >{{item.name}}</div>
        </div>
        <div class="bottom-space"></div>
        <div @click="confirm" class="bottom-p">
            <div class="bottom-btn">确认</div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav.vue'
import {teacherDirectoryApi, updateSubjectByTeacher, getAllSubject} from '@/api/myNewApi' 

export default {
    components: {
        headNav
    },
    computed: {
        schoolId () {
            return this.$store.state.user.schoolId
        },
        teacherId () {
             return this.$store.state.user.teacherId
        },
        identityData () {
            return this.$store.state.myInfo.identityData
        }
    },
    data () {
        return {
            stageList: [],
            allSubjectList: [],
            subjectList: [],
            curStage: '',
            curSubject: ''
        }
    },
    methods: {
        async getAllSubject () {
            let res = await getAllSubject({
                id: this.schoolId,
                params: {
                    PageNum: 1,
                    PageSize: 1000
                }
            })
            console.log(res)
            this.allSubjectList = res.items
            for (let s of this.allSubjectList) {
                this.addStage(s)
            }
        },
        addStage(item){
            let isHave = false
            for(let s of this.stageList) {
                if (s.stageId == item.stageId) {
                    isHave = true
                    break
                }
            }
            if (!isHave) {
                
                this.stageList.push({
                    stageName: item.stageName,
                    stageId: item.stageId
                })
            }
        },
        selectStage(item){
            this.curStage = item
            this.subjectList = []
            for(let sub of this.allSubjectList) {
                if (this.curStage.stageId == sub.stageId) {
                    this.subjectList.push(sub)
                }
            }
        },
        selectSubject(item){
            this.curSubject = item
        },
        async confirm () {
            if (!this.curSubject) {
                this.$vux.toast.text('请选择科目', 'top')
                return
            }
            let res = await updateSubjectByTeacher({
                id: this.teacherId,
                data: {
                    subJectIds: [
                       this.curSubject.id
                    ]
                }
            })
            console.log(res)
            this.$vux.toast.text('修改学科成功', 'top')
            this.$router.go(-1)
        },
        initSubject(){
            if (!this.identityData.stageSubjectId){
                this.selectStage(this.stageList[0])
                return
            }

            for(let item of this.allSubjectList) {
                if (item.id == this.identityData.stageSubjectId) {
                    this.selectStage({
                        stageName: item.stageName,
                        stageId: item.stageId
                    })
                    this.selectSubject(item)
                    break
                }
            }
        }
    },
    async mounted(){
    
        var res = await teacherDirectoryApi()
        this.$store.commit('myInfo/setIdentityData', res)


        await this.getAllSubject()
        this.initSubject()
        
    }
}
</script>
<style scoped>
.cur-sub{
    height: 0.98rem; line-height: 0.98rem; text-align: center;
    color: #666666; font-size: 0.3rem;
    border-bottom: 1px solid #E5E5E5;
    box-sizing: border-box;
}
.stag-p{
    height: calc(100% - 3.06rem);
    float: left; width: 2.8rem;
}
.stag-item{
    height: 0.98rem; line-height: 0.98rem; text-align: center;
    font-size: 0.3rem;
    border-left: 0.06rem solid transparent;
}
.stag-item.active{
    background: #fff; border-left: 0.06rem solid #128FEF;
}
.subject-p{
    height: calc(100% - 3.06rem);
     float: left;width: calc(100% - 2.8rem);
     background: #fff;
     overflow-y: scroll;
}
.subject-item{
      height: 0.98rem; line-height: 0.98rem; text-align: center;
    font-size: 0.3rem;
    box-sizing: border-box; 
}
.subject-item.active{
    color: #128FEF;
}
.bottom-p{
    position: fixed; width: 100%; height: 1.2rem;
    left: 0; bottom: 0;
    background: #fff;
    box-shadow: 0 0 0.3rem 0.06rem rgba(0,0,0,0.3);
}
.bottom-btn{
    width: 5.6rem; height: 0.84rem; line-height: 0.84rem; text-align: center;
    border-radius: 0.42rem; background: #128FEF; color: #fff;
    margin: 0.2rem auto 0 auto;

}
</style>